Vue.component('formulario-paso-2', {
    data: () => ({
        paisPaso1: '',
        idDistribuidor: '',
        registro: '',
        estados: [],
        municipios: [],
        msgError: '',
        completo: false,
        nombreEscuela: '',
        telefonoEscuela: '',
        calle: '',
        numero: '',
        colonia: '',
        estado: '',
        municipio: 'Municipio - Ciudad',
        claveIncorporacion: '',
        sitioWeb: '',
        tipoEscuela: 'Tipo de escuela',
        numeroAlumnos: 'Número de alumnos',
        maternal: false,
        preescolar: false,
        primaria: false,
        secundaria: false,
        preparatoria: false,
        licenciatura: false,
        posgrado: false,
    }),
    mounted: function() {
        var URLactual = window.location.href;
        var arrDatos = URLactual.split('&');

        if (arrDatos.length > 1) {
            var registro = arrDatos[2];
            this.registro = atob(registro);
            axios.post('php/mysql/data.php', {
                params: {
                    tipo: 'Registro',
                    registro: registro
                }
            }).then(response => {
                var objRespuesta = response.data;
                if (!objRespuesta['boolError']) {
                    if (!objRespuesta['boolRegistro']) {
                        window.location = 'apoyo-covid-19.html';
                    }
                }
            }).catch(e => {
                console.log(e);
            });

            this.paisPaso1 = arrDatos[1];
            if (this.paisPaso1 == 'MEX') {
                var obj = this;
                axios.post('php/mysql/data.php', {
                    params: {
                        tipo: 'Estados'
                    }
                }).then(response => {
                    var objRespuesta = response.data;
                    // console.log(objRespuesta);
                    if (!objRespuesta['boolError']) {
                        var strEstados = atob(objRespuesta['strEstados']);
                        strEstados = decodeURIComponent(strEstados);
                        var objEstados = JSON.parse(strEstados);
                        obj.estados = objEstados;
                        obj.estado = 'Estado';
                    }
                }).catch(e => {
                    console.log(e);
                });
            }

            this.idDistribuidor = arrDatos[3];
        } else {
            window.location = 'apoyo-covid-19.html';
        }
    },
    methods: {
        cargarMunicipios() {
            var estado = this.estado;
            var obj = this;
            axios.post('php/mysql/data.php', {
                params: {
                    tipo: 'Municipios',
                    estado: estado
                }
            }).then(response => {
                var objRespuesta = response.data;
                // console.log(objRespuesta);
                if (!objRespuesta['boolError']) {
                    var strMunicipios = atob(objRespuesta['strMunicipios']);
                    strMunicipios = decodeURIComponent(strMunicipios);
                    var objMunicipios = JSON.parse(strMunicipios);
                    obj.municipios = objMunicipios;
                    obj.municipio = 'Municipio - Ciudad';
                }
            }).catch(e => {
                console.log(e);
            });
        },
        validarFormulario() {
            var nombreEscuela = this.nombreEscuela;
            if ((nombreEscuela == '') || (nombreEscuela.length < 4)) {
                this.msgError = 'El campo "Nombre de la escuela" debe de contener información válida.';
                this.limpiarMensaje();
                return false;
            }

            var telefonoEscuela = this.telefonoEscuela;
            var pais = this.paisPaso1;
            if (telefonoEscuela == '') {
                this.msgError = 'El campo "Teléfono de la escuela" no debe de estar vacío.';
                this.limpiarMensaje();
                return false;
            }

            if (pais == 'MEX') {
                if (!this.validarTelefono(telefonoEscuela)) {
                    this.msgError = 'El Teléfono de la escuela registrado, debe ser un número teléfonico valido de 10 digitos.';
                    this.limpiarMensaje();
                    return false;
                }
            }

            var calle = this.calle;
            if ((calle == '') || (calle.length < 5)) {
                this.msgError = 'El campo "Calle" debe de contener información válida.';
                this.limpiarMensaje();
                return false;
            }

            var numero = this.numero;
            if ((numero == '') || (numero.length < 1)) {
                this.msgError = 'El campo "Número" debe de contener información válida.';
                this.limpiarMensaje();
                return false;
            }

            var colonia = this.colonia;
            if ((colonia == '') || (colonia.length < 3)) {
                this.msgError = 'El campo "Colonia" debe de contener información válida.';
                this.limpiarMensaje();
                return false;
            }

            var estado = this.estado;
            if (estado == 'Estado') {
                this.msgError = 'El campo "Estado" no debe de estar vacío.';
                this.limpiarMensaje();
                return false;
            }

            if (pais == 'MEX') {
                var municipio = this.municipio;
                if (municipio == 'Municipio - Ciudad') {
                    this.msgError = 'El campo "Municipio - Ciudad" no debe de estar vacío.';
                    this.limpiarMensaje();
                    return false;
                }

                var claveIncorporacion = this.claveIncorporacion;
                if ((claveIncorporacion == '') || (claveIncorporacion.length < 10) || (claveIncorporacion.length > 12)) {
                    this.msgError = 'El campo "Clave de incorporación" no debe de estar vacío o debe de ser un número entero de 10 o 12 digitos.';
                    this.limpiarMensaje();
                    return false;
                }
            }

            var sitioWeb = this.sitioWeb;
            if (sitioWeb != '') {
                if (!this.validarURL(sitioWeb)) {
                    this.msgError = 'El URL del Sitio Web registrado no es un URL valido.';
                    this.limpiarMensaje();
                    return false;
                }
            }

            var tipoEscuela = this.tipoEscuela;
            if (tipoEscuela == 'Tipo de escuela') {
                this.msgError = 'El campo "Tipo de escuela" no debe de estar vacío.';
                this.limpiarMensaje();
                return false;
            }

            var numeroAlumnos = this.numeroAlumnos;
            if (numeroAlumnos == 'Número de alumnos') {
                this.msgError = 'El campo "Número de alumnos" no debe de estar vacío.';
                this.limpiarMensaje();
                return false;
            }

            if ((!this.maternal) && (!this.preescolar) && (!this.primaria) && (!this.secundaria) && (!this.preparatoria) && (!this.licenciatura) && (!this.posgrado)) {
                this.msgError = 'Debe de seleccionar al menos un nivel educativo de las opciones.';
                this.limpiarMensaje();
                return false;
            }

            this.EnviarDatos();

        },
        limpiarMensaje() {
            var obj = this;
            setTimeout(function() { obj.msgError = ''; }, 4000);
        },
        validarTelefono(telefono) {
            var regla = /[0-9]{10}/;
            return regla.test(telefono);
        },
        validarURL(URL) {
            var regla = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/
            return regla.test(URL);
        },
        EnviarDatos() {
            var obj = this;
            this.completo = true;
            axios.post('php/mysql/registro-escuelas.php', {
                params: {
                    idDistribuidor: this.idDistribuidor,
                    idRegistro: this.registro,
                    nombre: this.nombreEscuela,
                    telefono: this.telefonoEscuela,
                    calle: this.calle,
                    numero: this.numero,
                    colonia: this.colonia,
                    estado: this.estado,
                    municipio: this.municipio,
                    claveInc: this.claveIncorporacion,
                    sitioWeb: this.sitioWeb,
                    tipoEscuela: this.tipoEscuela,
                    numeroAlumnos: this.numeroAlumnos,
                    maternal: this.maternal,
                    preescolar: this.preescolar,
                    primaria: this.primaria,
                    secundaria: this.secundaria,
                    preparatoria: this.preparatoria,
                    licenciatura: this.licenciatura,
                    posgrado: this.posgrado
                }
            }).then(response => {
                var objRespuesta = response.data;
                // console.log(objRespuesta);
                if (!objRespuesta['boolError']) {
                    if (!objRespuesta['boolError']) {
                        this.completo = false;
                        $('#myModal').modal('show');
                        setTimeout(function() { window.location = 'apoyo-covid-19.html';; }, 2000);
                    }
                }
            }).catch(e => {
                this.completo = false;
                console.log(e);
            });
        }
    },
    template: /* template */ `
    <div class="shadow bg-white rounded container-white position-relative mb-5">
        <div class="container">

            <h1 class="titulo-formulario"> Regístrate Gratis </h1>

            <form class="formulario-registro">
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <input type="text" class="form-control" id="nombreEscuela"
                            name="nombreEscuela" v-model="nombreEscuela"
                            placeholder="Nombre de la escuela">
                    </div>
                    <div class="form-group col-md-12">
                        <input type="text" class="form-control" id="telefonoEscuela"
                            name="telefonoEscuela" v-model="telefonoEscuela"
                            placeholder="Teléfono de la escuela">
                    </div>
                    <div class="form-group col-md-7">
                        <input type="text" class="form-control" id="calle" name="calle"
                            v-model="calle" placeholder="Calle">
                    </div>
                    <div class="form-group col-md-5">
                        <input type="text" class="form-control" id="numero" name="numero"
                            v-model="numero" placeholder="Número">
                    </div>
                    <div class="form-group col-md-12">
                        <input type="text" class="form-control" id="colonia" name="colonia"
                            v-model="colonia" placeholder="Colonia">
                    </div>
                    <div class="form-group col-md-12" v-if="paisPaso1 == 'MEX'">
                        <select class="form-control" id="estado" name="estado" v-model="estado"
                            @change="cargarMunicipios()">
                            <option disabled> Estado </option>
                            <option v-for="estado in estados" :value="estado.clave">
                                {{ estado.nombre }} </option>
                        </select>
                    </div>
                    <div class="form-group col-md-12" v-if="paisPaso1 == 'MEX'">
                        <select class="form-control" id="municipio" name="municipio"
                            v-model="municipio">
                            <option disabled> Municipio - Ciudad </option>
                            <option v-for="municipio in municipios" :value="municipio.clave">
                                {{ municipio.nombre }} </option>
                        </select>
                    </div>
                    <div class="form-group col-md-12" v-else>
                        <input type="text" class="form-control" id="estado" name="estado"
                            v-model="estado" placeholder="Estado">
                    </div>
                    <div class="form-group col-md-12" v-if="paisPaso1 == 'MEX'">
                        <input type="text" class="form-control" id="claveIncorporacion"
                            name="claveIncorporacion" v-model="claveIncorporacion"
                            placeholder="Clave de incorporación">
                    </div>
                    <div class="form-group col-md-12" v-if="paisPaso1 == 'MEX'">
                        <input type="text" class="form-control" id="sitioWeb" name="sitioWeb"
                            v-model="sitioWeb" placeholder="Sitio Web">
                    </div>
                    <div class="form-group col-md-12">
                        <select class="form-control" id="tipoEscuela" name="tipoEscuela"
                            v-model="tipoEscuela">
                            <option disabled> Tipo de escuela </option>
                            <option value="Pública"> Pública </option>
                            <option value="Privada"> Privada </option>
                        </select>
                    </div>
                    <div class="form-group col-md-12">
                        <select class="form-control" id="numeroAlumnos" name="numeroAlumnos"
                            v-model="numeroAlumnos">
                            <option disabled> Número de alumnos </option>
                            <option value="0-49"> Menos de 50 </option>
                            <option value="50-100"> De 50 a 100 alumnos </option>
                            <option value="101-200"> De 101 a 200 alumnos </option>
                            <option value="201-500"> 201 a 500 alumnos </option>
                            <option value="501-1000"> Más de 500 alumnos </option>
                        </select>
                    </div>
                    <div class="form-group col-md-12">
                        <h1 class="titulo-formulario" style="font-size: 20px;"> Niveles Educativos
                        </h1>
                    </div>
                    <div class="form-group col-md-7">
                        <input type="checkbox" id="maternal" name="maternal" v-model="maternal">
                        Maternal
                    </div>
                    <div class="form-group col-md-5">
                        <input type="checkbox" id="preescolar" name="preescolar"
                            v-model="preescolar"> Preescolar
                    </div>
                    <div class="form-group col-md-7">
                        <input type="checkbox" id="primaria" name="primaria" v-model="primaria">
                        Primaria
                    </div>
                    <div class="form-group col-md-5">
                        <input type="checkbox" id="secundaria" name="secundaria"
                            v-model="secundaria"> Secundaria
                    </div>
                    <div class="form-group col-md-7">
                        <input type="checkbox" id="preparatoria" name="preparatoria"
                            v-model="preparatoria"> Preparatoria / Bachillerato
                    </div>
                    <div class="form-group col-md-5">
                        <input type="checkbox" id="licenciatura" name="licenciatura"
                            v-model="licenciatura"> Licenciatura
                    </div>
                    <div class="form-group col-md-12">
                        <input type="checkbox" id="posgrado" name="posgrado" v-model="posgrado">
                        Posgrado
                    </div>
                    <div class="pb-3 col-md-12 text-center">
                        <span class="text-danger font-wight">
                            <b> {{ msgError }} </b>
                        </span>
                    </div>
                    <div class="form-group col-md-12 text-center w-10" v-if="completo === true">
                        <div class="spinner-grow text-primary" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-secondary" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-success" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-danger" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-warning" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                        <div class="spinner-grow text-info" role="status">
                            <span class="sr-only">Registrando...</span>
                        </div>
                    </div>
                    <div class="form-group col-md-12">
                        <button type="button" @click="validarFormulario()"
                            class="btn boton-formulario"> REGISTRARSE </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    `
});

Vue.component('modal', {
    template: '#modal-template'
})

var app = new Vue({
    el: '#app',
    data: {
        estados: [],
        municipiaos: []
    },
    mounted: function() {
        var obj = this;
        axios.post('php/mysql/data.php', {
            params: {
                tipo: 'Estados'
            }
        }).then(response => {

        }).catch(e => {
            console.log(e);
        });
        this.show();
    },
    methods: {
        show() {
            // $('#myModal').modal('show');
        }
    }
});